<template>
  <div class="placeholder-page">
    <h2>{{ title }}</h2>
    <p>这是一个占位页面，用于展示动态路由功能。</p>
    <p>当前路由: {{ $route.path }}</p>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const title = computed(() => {
  return route.meta?.title || '占位页面'
})
</script>

<style scoped>
.placeholder-page {
  padding: 20px;
  text-align: center;
}

h2 {
  color: #1890ff;
  margin-bottom: 16px;
}

p {
  margin-bottom: 8px;
  color: #666;
}
</style>
